<template>
<div>
    <headTop></headTop>
    <el-card>
        <el-button type="warning">打印表单</el-button>

        <div class="join-content">
            <h2 style="text-align:center;font-size:28px;font-weight:bold;">入库单</h2>

            <div class="store-insert-title">
                <div class="store-insert-title">
                    <el-image style="width: 35px; height: 35px; margin:0px 15px;" :src="require('@/assets/img/mlogo.png')" fit="fit"></el-image>
                    <p>{{dataForm.company}}</p>
                </div>
                <p class="title-no"><span style="color:red;font-size:16px;">单据编号：</span>{{dataForm.order_num}}</p>
            </div>
            <div class="table-header">
                <div class="table-header-item">
                    <p style="">供应商:</p>
                    <el-select class="insert-el-select" v-model="dataForm.craft_id" placeholder="请选择供应商">
                        <el-option v-for="(item ,index) in crafts" :key="index" :label="item.company" :value="item.id"></el-option>
                    </el-select>
                </div>
            <div class="table-header-item">
                    <p style="">仓库:</p>
                    <el-select class="insert-el-select" v-model="dataForm.store_id" placeholder="请选择仓库">
                        <el-option v-for="(item ,index) in stores" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
                <!-- <div class="table-header-item">
                    <p style="margin-right:10px;">类别:</p>
                    <el-radio v-model="radio" label="1">成品</el-radio>
                    <el-radio v-model="radio" label="2">半成品</el-radio>
                    <el-radio v-model="radio" label="3">毛坯</el-radio>
                    <el-radio v-model="radio" label="4">材料</el-radio>
                </div> -->
                <div class="table-header-item">
                    <p style="margin-right:10px;">制表人:</p>
                    <p style="font-weight:bold;margin-right:10px;color:#222;">{{dataForm.username}}</p>

                </div>
                <div class="table-header-item-right">
                    <p style="margin-right:10px;">制表日期:</p>
                    <p style="font-weight:bold;margin-right:10px;color:#222;">{{dataForm.today}}</p>
                </div>
            </div>
            <div class="table-content">
                <el-table ref="table" :data="tableData" border show-summary :summary-method="getSummaries" style="width: 100%;">

                    <el-table-column type="index" label="序号" width="50">
                    </el-table-column>
                    <el-table-column prop="productName" label="品名">
                        <template slot-scope="scope">
                            <el-select class="insert-el-select" @change="selectChanged(scope.row)" v-model="scope.row.product_id" placeholder="" filterable>
                                <el-option v-for="(item ,index) in products" :key="index" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="productNum" label="编号">
                        <template slot-scope="scope">
                            <el-select class="insert-el-select" @change="selectChanged(scope.row)" v-model="scope.row.product_id" placeholder="" filterable>
                                <el-option v-for="(item ,index) in products" :key="index" :label="item.productNo" :value="item.id"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="unit" label="单位">
                        <template slot-scope="scope">
                            <el-select class="insert-el-select" v-model="scope.row.unit_id" remote filterable placeholder="">
                                <el-option v-for="(item ,index) in units" :key="index" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                    <el-table-column prop="number" label="数量">
                        <template slot-scope="scope">
                            <el-input type="text" placeholder="请输入内容" v-model="scope.row.number" @input='changeInput(scope.row)'>
                            </el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="price" label="单价" width="80">
                    </el-table-column>
                    <el-table-column prop="money" label="金额">
                    </el-table-column>
                    <el-table-column prop="remark" label="备注">
                    <template slot-scope="scope">
                         <div contenteditable="true" >{{scope.row.remark}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="50">
                        <template slot-scope="scope">
                            <el-button type="danger" @click="deleteHandle(scope.row)" icon="el-icon-delete" circle></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <p style="font-size:14px;color:#999;margin-top:10px;">货到验明，收妥作实，如有错漏，请即通知。</p>
            </div>
            <div class="table-footer">
                <div class="table-header-item">
                    <p style="">备注:</p>
                    <div contenteditable="true" style="border-bottom:1px solid #ddd; min-width:100px;max-width:200px;margin-left:10px;"></div>
                </div>
                <div class="table-header-item">
                    <p style="margin-right:10px;">状态:</p>
                    <el-tag>未审核</el-tag>
                </div>
                <div class="table-header-item">
                    <p style="margin-right:10px;">核验人:</p>
                    <p style="font-weight:bold;margin-right:10px;color:#222;">{{this.$store.getters.user.username}}</p>
                </div>
                <div class="table-header-item-right">
                    <p style="margin-right:10px;">审核日期:</p>
                    <p style="font-weight:bold;margin-right:10px;color:#222;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</p>
                </div>
            </div>
        </div>
        <el-button style="float:right;margin:20px 0px;" @click="insertStore()" type="primary">提交审核</el-button>

    </el-card>
</div>
</template>

<script>
import headTop from "@/components/headTop";
import moment from 'moment';
import {createOrder} from '@/utils/'
import {
    getCraftList,
    getProductList,
    getStoreList,
    getUnitList,
    insertStoreSave
} from "@/api/getData";
import { parseGeoJson } from 'echarts';
export default {
    data() {
        return {
            username: '',
            company:'',
            dataForm: {},
            crafts: [],
            products: [],
            stores:[],
            units: [],
            radio: '1',
            today: '',
            tableData: [
                {}, {}, {}, {}
                ],
            loading: false,
            cardNumber:''
        }
    },
    components: {
        headTop
    },
    mounted() {
        getCraftList().then((res) => {
            if (res.code == 200) {
                this.crafts = res.data.list;
            }
        });
        getProductList().then((res) => {
            if (res.code == 200) {
                this.products = res.data.list;
                console.log(this.products);
            }
        });
        getStoreList().then((res) => {
            if (res.code == 200) {
                this.stores = res.data.list;
            }
        });
        this.getUnitLists();
        this.dataForm.today = this.dateFormat(new Date());
        this.dataForm.username = this.$store.getters.user.username;
        this.dataForm.company = this.$store.getters.user.company;
        this.dataForm.order_num = createOrder('RK');
    },
    methods: {
        dateFormat: function (date) {
            return moment(date).format("YYYY 年 MM 月 DD 日");
        },
        selectChanged(val) {
            console.log(val);
            this.products.map((item, index) => {
                if (item.id == val.product_id) {
                    val.price = item.price / 1000;
                    if (val.number) {
                        val.money = (val.number * val.price).toFixed(2)
                    }
                }
            })
            var count = 0;

            this.tableData.forEach(element => {
                if (element.product_id) {
                    count++;
                }
            });
            if (count >= this.tableData.length) {
                this.tableData.push({});
            }
        },
        deleteHandle(val) {
            if (this.tableData.length <= 1) {
                this.$message('最后一行不可删除');
            } else {
                this.tableData.splice(this.tableData.indexOf(val),1)
            }
        },
        changeInput(val) {
            if (val.price) {
                val.money = (val.number * val.price).toFixed(2);
            }
        },
        getUnitLists(query) {
            if (query !== '') {
                this.loading = true;
                var params = {
                    'name': query
                }
                getUnitList(params).then((res) => {
                    this.loading = false;
                    if (res.code == 200) {
                        this.units = res.data.list;
                    }
                });
            } else {
                this.options = [];
            }
        },
        getSummaries(param) {
            const {
                columns,
                data
            } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '共计';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    if (index == 6) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0).toFixed(2);
                        sums[index] += ' 元';
                    } else {
                        sums[index] = '';
                    }
                }

            });

            return sums;
        },
       async insertStore(){
           var params = this.dataForm;
           let child = JSON.stringify(this.tableData);
            params.chirld = child;
            console.log(params);
             const result = await insertStoreSave(params);
               if (result.code == 200) {
                    this.$message('提交成功');
                }
        }

    }

}
</script>

<style lang="less" scoped>
.join-content {
    margin-top: 20px;
    border: 1px solid #ddd;
    padding: 15px;
}

.store-insert-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    p {
        font-size: 16px;
        color: #222;
        font-weight: bold;
    }

}

.title-no {
    font-size: 20px;
    font-weight: bold;
    margin: 0px 10px;
}

.table-header {
    margin-top: 10px;
    align-items: center;
    display: flex;
    justify-content: space-between;

    .table-header-item {
        margin: 0px 10px;
        align-items: center;
        display: flex;

        .el-radio {
            margin-right: 10px;
        }
    }

    .table-header-item-right {
        align-items: right;
        display: flex;

    }

}

.table-footer {
    margin-top: 10px;
    align-items: center;
    display: flex;
    justify-content: space-between;

    .table-header-item {
        margin: 0px 10px;
        align-items: center;
        display: flex;

        .el-radio {
            margin-right: 10px;
        }
    }

    .table-header-item-right {

        align-items: right;
        display: flex;

    }
}

.insert-el-select {
    margin-left: 10px;
}

.insert-el-select /deep/ .el-input__inner {
    border: 0;
    font-size: 14px;
    border-radius: 0;
    border-bottom: 1px solid #ddd;

}

/* 如果你的 el-input type 设置成textarea ，就要用这个了 */
.insert-el-select /deep/ .el-textarea__inner {
    border: 0;
    // resize: none;/* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
}

.table-content {
    margin: 10px;
}

.el-table {
    border: 1px solid #ddd;

}
</style>
